<template>
    <div>
        <codemirror @input="codeChange" ref="codemirror" v-model="str" :options="options"></codemirror>
    </div>
</template>

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' // sublime编辑器效果
import 'codemirror/theme/dracula.css'// 配置里面也需要theme设置为monokai
import 'codemirror/mode/vue/vue.js' // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' // 光标行背景高亮，配置里面也需要styleActiveLine设置为true
export default {
  name: 'CodeEdit',
  components: {
    codemirror
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    codekey: {
      type: String,
      default: ''
    }
  },
  watch: {
    'code': {
      handler: function (e) {
        this.str = e || ''
      }
    },
    'readOnly': {
      handler: function (e) {
        this.options.readOnly = e
        this.$refs.codemirror.optionChange()
      }
    }
  },
  data () {
    return {
      str: '',
      options: {
        tabSize: 4, // tab的空格个数
        theme: 'dracula', // 主题样式
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        mode: 'vue', // 实现javascript代码高亮
        readOnly: false // 只读
      }
    }
  },
  methods: {
    codeChange (code) {
      this.$emit('contentChange', code)
    }
  },
  created () {
    this.str = this.code
  }
}
</script>

<style scoped>

</style>
